<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page language= "java" contentType="text/html;charset=UTF-8"%> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>收入科目管理</title>
        <link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
        <link type="text/css" href="css/screen.css" rel="Stylesheet" />
        <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/jquery.form.js"></script>
        
        
        <script type="text/javascript">
        
            //创建该分类的时候调用
            function setButtonEvent(id, parentId) {
                //小分类的按钮事件
                if (parentId) {
                    $( "#delete-subitem-" + id )
                    .button()
                    .click(function(){
                        $.getJSON("jsonDeleteIncomeType.action","incomeType.id=" + id,function(data){
                            $("#subitem-" + parentId + "-" + id).remove();
                            });
                        
                    });
                //大分类的按钮事件
                } else {
                    $( "#delete-item-" + id )
                    .button()
                    .click(function(){
                        $.getJSON("jsonDeleteIncomeType.action","incomeType.id=" + id,function(data){
                            $("tr[id^=subitem-" + id + "]").remove();
                            $("#item-" + id).remove();
                        });
                    });

                

                    $( "#create-subitem-" + id )
                    .button()
                    .click(function(evt) {
                        $("input#incomeType-pid").val(id);
                        $( "#dialog-form" ).dialog( "open" );
                    });                   
                }
            }
        
        
            //创建大类
            function createItemRow(id, name) {
                return "<tr id='item-" + id + "'>"
                         + "<td>" + id + "</td>"
                         + "<td>" + name + "</td>"
                         + "<td/>"
                         + "<td>"
                         +     "<button id='create-subitem-" + id + "' class='create-subitem'>创建小类</button>"
                         +     "<button id='delete-item-" + id + "' class='delete-item'>删除大类</button>"
                         + "</td>"                    
                       + "</tr>";
             }

            //创建小类
            function createSubitemRow(id, name, parentId) {
               return "<tr id='subitem-" + parentId + "-" + id + "'>"
                         + "<td>" + id + "</td>"                  
                         + "<td>&nbsp;&nbsp;|-</td>"
                         + "<td>" + name + "</td>"
                         + "<td>"
                         +     "<button id='delete-subitem-" + id + "' class='delete-subitem'>删除小类</button>"
                         + "</td>"
                       + "</tr>";
             }

            $().ready(function(){ 
                  $( "#dialog-form" ).dialog({
                      autoOpen: false,
                      height: 300,
                      width: 350,
                      modal: true,
                      buttons: {
                          "创建": function() { 
                             $("#create-item-form").submit();
                             
                          },
                          "关闭": function() {
                              resetCreateItemForm();
                              $( this ).dialog( "close" );
                          }
                      },
                      close: function() {
                          resetCreateItemForm();
                      }
                  });
                
                
                $( "#create-item" )
                  .button()
                  .click(function() {
                      $( "#dialog-form" ).dialog( "open" );
                  });
               

                  //validation
                  $("#create-item-form input#incomeType-name")
                      .attr("class","required")
                      .attr("minlength", "1"); 
                  $("#create-item-form").validate();
                  //$("#create-item-form").attr("class", "cmxform");

                  $('#create-item-form').ajaxForm({ 
                        // dataType identifies the expected content type of the server response 
                        dataType:  'json', 
                 
                        // success identifies the function to invoke when the server response 
                        // has been received 
                        success:   processJson 
                    }); 
                  
              });

              function processJson(data) {
                    // 'data' is the json object returned from the server
                    //创建一个小类
                    if(data.parentId) {
                        $(createSubitemRow(data.id, data.name, data.parentId)).insertAfter($("#item-" + data.parentId));
                        setButtonEvent( data.id, data.parentId);
                    } else {
                        //创建一个大类
                        $("#item-table-body").prepend($(createItemRow(data.id, data.name)));
                        
                        setButtonEvent(data.id);
                    }            
              }

              function resetCreateItemForm() {
                  $("input#incomeType-pid").val('');
                  $("input#incomeType-name").val('');
              }
                 
        </script>
        
    </head>
 
    <body>
        收入科目一览
        <p/>
        <button id="create-item">创建大类</button>
        <div class="ui-widget">
            <table class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th>id</th><th colspan="2">名称</th><th>操作</th>
                    </tr>
                </thead>
                <tbody id="item-table-body">
                <s:if test="incomeTypes.size > 0">
                    <s:iterator value="incomeTypes">
                    <script  type="text/javascript">
                        document.write(createItemRow('<s:property value="id"/>', '<s:property value="name" />')); 
                        setButtonEvent('<s:property value="id"/>');
                    </script>
                    <s:if test="incomeDetailTypes.size > 0">
                    <s:iterator value="incomeDetailTypes">
                    <script  type="text/javascript">
                        document.write(createSubitemRow('<s:property value="id"/>', '<s:property value="name" />', '<s:property value="parentId" />')); 
                        setButtonEvent('<s:property value="id"/>', '<s:property value="parentId" />');
                    </script>
                    </s:iterator>
                    </s:if>
                    </s:iterator>
            </s:if>
            </tbody>
            </table>

        </div>
        
        <div id="dialog-form" title="创建分类">
            <s:form id="create-item-form" action="jsonCreateIncomeType">
                <s:textfield id="incomeType-pid" name="incomeType.parentId" cssStyle="display:none"/>
                <s:textfield id="incomeType-name" label="分类名称" name="incomeType.name" 
                    labelposition="left" />
            </s:form>
        </div>
    </body>
    

    
</html>
